<template>
	<div>
		<DetailPage class="detail-content" :model="formModel" v-if="!loading" v-bind="formConfig"></DetailPage>
    <PageLoading v-if="loading" />
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'
import DetailPage from '@/views/aplid/DetailPage/index.vue'

const props = defineProps<{
	nowRowData: any
	tempConfig?: any
}>()
const emit = defineEmits(['refresh'])

const formModel: any = ref({})

const formConfig = ref({
	inline: false,
	showBtn: true,
	labelPosition: 'top',
	labelWidth: '0',
	column: [],
})

const loading = ref(false)

const getInitData = () => {
	loading.value = true
	if (props.nowRowData.id) {
		formModel.value = props.nowRowData.itemData
		formModel.value.id = props.nowRowData.id
	}
	if (props.tempConfig.column) {
		formConfig.value.column = props.tempConfig.column
		formConfig.value.labelPosition = props.tempConfig.labelPosition
      setTimeout(() => {
      loading.value = false
    },100);
		return
	}
	apiMod
		.view_tableTemplate_id(props.nowRowData.tableTemplateId)
		.then((res) => {
			loading.value = false
			const config = res.data?.jsonStr || {}
			formConfig.value.column = config.column
			formConfig.value.labelPosition = config.labelPosition
		})
		.catch(() => {
			loading.value = false
		})
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.detail-content {
	background: #f5f5f5d6;
	padding: 10px;
	margin: 10px 0;
	border-radius: 5px;
}
</style>
